<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02_作用域与执行上下文</title>
</head>
<body>
<!-- 
1、区别1
    * 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了，而不是在函数调用时
    * 全局执行上下文环境是在全局作用域确定之后，js代码马上创建之前创建
    * 函数执行上下文环境是在调用函数时，函数体代码执行之前创建
2、区别2
    * 作用域是静态的，只要函数定义好了就一直存在，且不会再变化
    * 上下文环境是动态的，调用函数时创建，函数调用结束时上下文环境就会被释放
3、联系
    * 上下文环境（对象）是从属于所在的作用域
    * 全局上下文环境 ==> 全局作用域
    * 函数上下文环境 ==> 对应的函数使用域
-->
<script>
var a = 10, b = 20
function fn(x) {
    var a = 100, c = 300
    console.log('fn()', a, b, c, x) 

    function bar(x) {
        var a = 1000, d = 400
        console.log('bar()', a, b, c, d, x)
    }

    bar(100)
    bar(200)
}
fn(10)
</script>
</body>
</html>